<template>
  <el-row>
    <el-col :span="4" class="grouplist">
      <el-menu v-for="item in grouplist" :key="item.name" :default-active="activeIdx" @select="handleSelect">
        <el-menu-item :index="item.name">{{ item.name }}</el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="20" class="chat">
      <ChatPanel :name="name" classname="group" />
    </el-col>
  </el-row>
</template>
<script setup lang='ts'>
import ChatPanel from '@/components/Chat/ChatPanel.vue';
import { reactive } from 'vue';
import { ref } from 'vue';

const name = ref('')
const activeIdx = ref(1)
const grouplist = reactive([{
  imgurl: '',         //群头像
  name: '共同发展群'    //群名称
}, {
  imgurl: '',
  name: '合作共赢群'
}])
function handleSelect(index: any) {
  name.value = index;
  activeIdx.value = index
}
</script>
<script lang='ts'>

</script>